<!--注册页面-->
<!--login样式移植-->
<!--v-model表示对变量进行双向绑定-->
<!--this代表的是vue对象,定义一个变量self-->
<!--slef.user代表的就是vue里面的user-->
<!--Log in按钮代表的跳转页面到/login-->
<div id="register" class="animate form login_form">
	<section class="login_content">
		<form>
			<h1>Create Account</h1>

			<div>
				<input
					type="text"
					v-model:value="user.userName"
					class="form-control"
					placeholder="Username"
					required=""
				/>
			</div>
			<div>
				<input type="email" v-model:value="user.email" class="form-control" placeholder="Email" required="" />
			</div>
			<div>
				<input
					type="password"
					v-model:value="user.password"
					class="form-control"
					placeholder="Password"
					required=""
				/>
			</div>
			<div>
				<a @click="register()" class="btn btn-default submit" href="javascript:void(0);">Submit</a>
			</div>

			<div class="clearfix"></div>

			<div class="separator">
				<p class="change_link">
					Already a member ?

					<a href="/login" class="to_register"> Log in </a>
				</p>

				<div class="clearfix"></div>
				<br />

				<div>
					<h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
					<p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
				</div>
			</div>
		</form>
	</section>
</div>
<script>
	var registerVue = new Vue({
		el: "#register",
		data: {
			user: {
				userName: "",
				email: "",
				password: "",
			},
		},
		methods: {
			register: function () {
				if (this.user.userName == "" || this.user.email == "" || this.user.password == "") {
					layer.alert("用户名、邮箱、密码不能为空。", { icon: 0 });
					return;
				}
				console.log(this.user);

				var self = this;
				<!--$.ajax-->
				$.ajax({
					url: "/api/user",
					type: "post",
					contentType: "application/json",
					data: JSON.stringify(self.user),
					success: function (data) {
						if (data.status == 200) {
							location.href = "/test/thymeleafIndex";
						} else {
							layer.msg(data.message, { icon: 0 });
						}
					},
					error: function (data) {
						layer.msg(data.responseText, { icon: 0 });
					},
				});
			},
		},
	});
</script>
